<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RENDER</title>
    <script src="render.js"></script>
</head>
<body>
<div class="root">
    {{html(item.name)}} <br>{{item.age >100 ? "up":"down"}}
</div>
<div class="array">
    <p id="a{{key}}">{{item.name}} {{item.age > 1?0:2}}</p>
</div>
<main class="content-main">
    <article class="content-main-list">
        <h1>{{item.title}}</h1>
        <p>{{item.author}}</p>
        <hr>
        <div>
            {{this.html(item.body)}}
        </div>
    </article>
</main>
<button onclick="test()">Change</button>
<script src="test.js"></script>

<script>
    function add(a,b){
        return a+b;
    }
    new Render(".content-main").for(JSON.parse(`[
  {
    "id": 1,
    "uid": 1,
    "author": "tong",
    "title": "Hello Edition Blog",
    "body": "<h1>Hello<h1>",
    "create_time": "2020-01-02 17:27:25",
    "update_time": "2020-01-02 17:27:25"
  },
  {
    "id": 2,
    "uid": 2,
    "author": "tongxxx",
    "title": "Hello Edition Blog XXXX",
    "body": "<h1>Hello XXXX<h1>",
    "create_time": "2020-01-02 17:27:25",
    "update_time": "2020-01-02 17:27:25"
  }
]`))
    // let X = new Render(".root");
    // X.obj({name: "<h1>hello</h1>", age: 123, ak: {yashua: "xxxx"}});
    // let Y = new Render(".array");
    // Y.for([{name: "a", age: "x"}, {name: "c", age: "d"}]);
    // Y.for(['a', 'b', 'c'])
    //
    function test() {
        X.obj({name: "zxc", age: Math.random()});
        Y.for([{name: "aaa", age: Math.random()}, {name: "cccc", age: "dddd"}]);
    }

    // NewRender(".root").obj({data:{person:{name:"abc",age:123,data:{names:"wo ya shua"}},other:{name:"123213"}}})
</script>
</body>
</html>